<template>
  <div>
    <el-dialog class="abow_dialog"
               :visible.sync="centerDialogVisible"
               center
               :title="title">
      <div style="text-align:right;color:darkorange;margin: auto; width: max-content; max-height: 100%">
        申请周次：<el-input v-model="in_week"
                  class="input3"
                  placeholder="申请周次"
                  style="width: 200px"></el-input>
        <br />
        上课节次：<template>
          <el-select v-model="in_section"
                     class="input3"
                     clearable
                     style="width: 200px;"
                     placeholder="节次">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </template><br /><br />
        申请机房：<template>
          <el-select v-model="in_labId"
                     class="input3"
                     clearable
                     style="width: 200px;"
                     placeholder="申请机房">
            <el-option v-for="item in labOption"
                       :key="item.labId"
                       :label="item.labName+' 机房：'+item.labId"
                       :value="item.labId">
            </el-option>
          </el-select>
        </template> <br /><br>
        申请原因：<el-input v-model="in_reason"
                  class="input3"
                  placeholder="申请原因"
                  style="width: 200px"></el-input>
        <div style="text-align:center">
          <el-button class="botton"
                     @click="centerDialogVisible = false">取 消</el-button>
          <el-button class="botton"
                     @click="insertConfirm()">确 定</el-button>
        </div>

      </div>
    </el-dialog>
    <el-dialog class="abow_dialog"
               :visible.sync="centerDialogVisible2"
               center
               :title="title">
      <div style="color: darkorange;text-align: center;margin: auto; width: max-content; max-height: 100%">
        <table style="text-align: left;">
          <tr>
            <td width="150px">申请学生：{{in_userAccount}}</td>
            <td width="180px">申请学期：{{in_term}}</td>
          </tr>
          <tr>
            <td width="150px">申请周次：{{in_week}}</td>
            <td width="180px">申请节次：{{in_sectionString}}</td>
          </tr>
          <tr>
            <td width="150px">申请机房：{{in_labId}}</td>
            <td width="180px">申请原因：{{in_reason}}</td>
          </tr>
          <tr>
            <td width="150px">申请时间：{{in_date}}</td>
            <td width="180px">申请状态：{{in_stateString}}</td>
          </tr>
        </table>
      </div>
    </el-dialog>
    <div style="color: darkorange; font-size: small; height: 30px">
      <template>
        <el-select v-model="to_term"
                   @change="load()"
                   class="input"
                   clearable
                   style="width: 100px;"
                   placeholder="学期">
          <el-option v-for="item in termOption"
                     :key="item.semesterId"
                     :label="item.term"
                     :value="item.term">
          </el-option>
        </el-select>
      </template>&nbsp;
      <el-input v-model="to_week"
                class="input"
                placeholder="申请周次"
                style="width: 100px"></el-input>&nbsp;
      <template>
        <el-select v-model="to_section"
                   class="input"
                   clearable
                   style="width: 100px;"
                   placeholder="节次">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </template>&nbsp;
      <el-input v-model="to_reason"
                class="input"
                placeholder="理由"
                style="width: 100px"></el-input>&nbsp;
      <el-button class="botton"
                 @click="load()">搜索</el-button>
      <el-button class="botton"
                 @click="insert()">申请 <i class="el-icon-circle-plus"></i></el-button>
    </div>
    <div style="margin-top: 8px; margin-bottom: 15px"></div>
    <div class="big">
      <el-table :data="tableData"
                :row-style="{ color: 'darkorange', height: '60px' }"
                border
                fit
                style="width: 100%">
        <el-table-column label="申请学期"
                         sortable
                         prop="term"></el-table-column>
        <el-table-column label="申请周次"
                         sortable
                         prop="week"> </el-table-column>
        <el-table-column label="申请节次"
                         prop="sectionString"> </el-table-column>
        <el-table-column label="申请原因"
                         prop="reason"> </el-table-column>
        <el-table-column label="申请状态"
                         prop="stateString"> </el-table-column>
        <el-table-column fixed="right"
                         label="查看/修改"
                         width="100px">
          <template slot-scope="scope">
            <div class="edit_delete">
              <el-button circle
                         icon="el-icon-view"
                         type="primary"
                         @click="showInfo(scope.row)"></el-button>
              <el-button circle
                         v-if="!scope.row.state"
                         icon="el-icon-edit"
                         type="warning"
                         @click="editInfo(scope.row)"></el-button>
              <el-button circle
                         v-if="scope.row.state==1"
                         icon="el-icon-check "
                         type="success"
                         @click="check (scope.row)"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0; text-align: center">
      <el-pagination :current-page="page"
                     :total="total"
                     background
                     class="white-list-tool"
                     layout="total,prev, pager, next, jumper"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: mapState(["user", "term", "token"]),
  data () {
    return {
      termOption: [],
      labOption: [],
      options: [{
        value: 0,
        label: '1~2'
      }, {
        value: 1,
        label: '3~5'
      }, {
        value: 2,
        label: '6~7'
      }, {
        value: 3,
        label: '8~9'
      }, {
        value: 4,
        label: '10~12'
      }, {
        value: 5,
        label: '13~15'
      }],
      title: "",
      tableData: [],
      total: 0,
      page: 1,
      centerDialogVisible: false,
      centerDialogVisible2: false,
      insertOrUpdate: true,

      in_srId: '',
      in_term: '',
      in_userId: '',
      in_week: '',
      in_section: '',
      in_labId: '',
      in_reason: '',
      in_date: '',
      in_state: '',
      in_stateString: '',
      in_sectionString: '',
      in_userAccount: '',
      in_row: '',

      to_term: '',
      to_week: '',
      to_section: '',
      to_reason: '',
      to_state: '',

      multipleSelection: [],
    };
  },
  methods: {
    async check (row) {
      await this.$http.put("/stuReq", {
        srId: row.srId,
        term: row.term,
        userId: row.userId,
        week: row.week,
        section: row.section,
        labId: row.labId,
        reason: row.reason,
        date: row.date,
        state: 3,
        weekday: row.weekday
      }, { headers: { 'userId': this.token } }).then((res) => {
        if (!res.data.success) { this.$message(res.data.errorMsg) }
        else { this.$message("实验室使用完成") }
      })
      this.load()
    },
    insert () {
      this.centerDialogVisible = true
      this.insertOrUpdate = true
      this.title = "实验室借用"
      this.clearInput()
    },
    clearInput () {
      this.in_row = ''
      this.in_srId = ""
      this.in_term = ""
      this.in_userId = ""
      this.in_week = ""
      this.in_section = ""
      this.in_labId = ""
      this.in_reason = ""
      this.in_date = ""
      this.in_state = ""
      this.in_stateString = ''
      this.in_sectionString = ''
      this.in_userAccount = ''
    },
    showInfo (row) {
      this.title = "详细信息"
      this.clearInput()
      this.in_term = row.term
      this.in_userAccount = row.user.name
      this.in_week = row.week
      this.in_labId = row.labId
      this.in_reason = row.reason
      this.in_date = this.formatDate(row.date)
      this.in_stateString = row.stateString
      this.in_sectionString = row.sectionString
      this.centerDialogVisible2 = true
    },
    editInfo (row) {
      this.title = "修改申请信息"
      this.insertOrUpdate = false
      this.clearInput()
      this.in_row = row
      this.in_srId = row.srId
      this.in_week = row.week
      this.in_section = row.section
      this.in_labId = row.labId
      this.in_reason = row.reason
      this.centerDialogVisible = true
    },
    HandleSelectChange (val) {
      this.multipleSelection = val;
    },
    async insertConfirm () {
      if (this.insertOrUpdate === true) {
        await this.$http.post("/stuReq", {
          term: this.term,
          userId: this.user.userId,
          week: this.in_week,
          section: this.in_section,
          labId: this.in_labId,
          reason: this.in_reason,
        }, { headers: { 'userId': this.token } }).then((res) => {
          if (res.data.success === true) { this.$message("插入成功") }
          else (this.$message(res.data.errorMsg))
        });
      }
      if (this.insertOrUpdate === false) {
        await this.$http.put("/stuReq", {
          srId: this.in_row.srId,
          term: this.in_row.term,
          userId: this.in_row.userId,
          week: this.in_week,
          section: this.in_row.section,
          labId: this.in_labId,
          reason: this.in_reason,
          date: this.in_row.date,
          state: this.in_state,
          weekday: this.in_row.weekday
        }, { headers: { 'userId': this.token } }).then((res) => {
          if (res.data.success === true) { this.$message("修改成功") }
          else (this.$message(res.data.errorMsg))
        });;
      }
      this.centerDialogVisible = false;
      this.load();
    },
    load () {
      this.$http.post("/stuReq/1", {
        term: this.to_term,
        userId: this.user.userId,
        week: this.to_week,
        section: this.to_section,
        reason: this.to_reason,
        state: this.to_state,
        page: this.page,
      }, { headers: { 'userId': this.token } }).then((res) => {
        this.tableData = res.data.data
        this.total = res.data.total
      });
    },
    handleCurrentChange (page) {
      this.page = page;
      this.load();
    },
    formatDate (date) {
      let data = date
      if (data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
    },
    loadOption () {
      this.$http.post("/lab/1", {}).then((res) => {
        if (!res.data.success) { this.$message(res.data.errorMsg) }
        else { this.labOption = res.data.data }
      })
    }
  },
  created () {
    this.$http.post("/semester/1", {}).then((res) => {
      if (res.data.success === false) { this.$message(res.data.errorMsg) }
      else { this.termOption = res.data.data }
    })
    this.load();
    this.loadOption();
  },
};
</script>


<style scoped>
::v-deep .el-dialog {
  background-color: #525151;
  border: 1px solid darkorange;
}

::v-deep .el-dialog__title {
  color: darkorange;
  caret-color: transparent;
}

.input3 /deep/ .el-input__inner {
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
}

.input /deep/ .el-input__inner {
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 100px;
}

.botton {
  color: darkorange;
  background-color: #525151;
  border-color: darkorange;
}

.botton:hover,
.botton:focus {
  background: rgb(255, 200, 133);
  border-color: darkorange;
  color: black;
}

.big {
  border: 1px solid darkorange;
}

::v-deep .el-table th {
  border: 1px solid darkorange !important;
  border-right: none !important;
  border-bottom: none !important;
  background-color: #525151;
}

::v-deep.el-table thead {
  color: darkorange;
  font-weight: 500;
  border: 1px solid darkorange;
}

::v-deep .el-table tr {
  background-color: #525151;
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border: 1px solid darkorange;
  border-right: none !important;
}

::v-deep .el-table::before {
  border: 1px solid darkorange;
  height: 0;
}

::v-deep .el-table td,
.el-table th {
  text-align: center;
}

.el-input {
  width: 100px;
  margin-bottom: 20px;
}

.el-table {
  border: 1px solid darkorange;
  margin: 0 auto;
  font-size: 15px;
}
</style>